<script setup>
import {useRouter} from "vue-router";
import {ElButton,ElAvatar,ElRow,ElCol,ElSpace,ElText} from "element-plus"
const router = useRouter();
</script>

<template>
  <div id="root">
    <div class="navigation">
      <el-row style="align-items: center;">
        <el-col :span="8">
          <el-space>
            <el-avatar></el-avatar>
            <h4>个人网站</h4>
          </el-space>
        </el-col>
        <!-- 导航区 -->
        <el-col :span="12">
          <el-space :size="40">
            <el-text tag="b" @click="router.push('/')">首页</el-text>
            <el-text tag="b" @click="router.push('/file')">文件</el-text>
            <el-text tag="b" @click="router.push('/media')">媒体</el-text>
            <el-text tag="b" @click="router.push('/tool')">工具</el-text>
            <el-text tag="b" @click="router.push('/about')">关于</el-text>
          </el-space>
        </el-col>

        <el-col :span="3">
          <el-space class="sign-in">
            <el-text tag="b" @click="router.push('/upload')">上传</el-text>
          </el-space>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <h1>编写博客、使用工具</h1>
      <h1 style="margin:0">还可以随时查看存储的媒体文件</h1>
      <el-text tag="b">edit your blogs、use tools</el-text>
      <el-text tag="b">and view your media files any time!</el-text>
    </div>
  </div>
</template>

<style scoped>
.navigation{
  border-bottom: .5px solid #e5e5e5;
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.sign-in{
  display: flex;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.el-text{
  cursor: pointer;
  font-size: 18px;
}
.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 135px 0;
}
</style>